<template>
  <!-- 添加商品属性页面  addProductAttr -->
  <div class="add-productAttr">
    <h3 style="text-align-last: center;">添加商品属性页面</h3>
    <div class="center-box">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" size='large'>
        <el-form-item label="属性名称:" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="商品类型:">
          <el-select v-model="ruleForm.parentId" placeholder="请选择">
            <el-option v-for="item in AttrCategoryList" :label="item.name" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类筛选样式:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">普通</el-radio>
            <el-radio :label="1">颜色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="能否进行检索:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">不需要检索</el-radio>
            <el-radio :label="1">关键字检索</el-radio>
            <el-radio :label="2">范围检索</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品属性关联:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="属性是否可选:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">唯一</el-radio>
            <el-radio :label="1">单选</el-radio>
            <el-radio :label="2">多选</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="属性值的录入方式:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">手工录入</el-radio>
            <el-radio :label="1">从下面列表中选择</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="属性值可选值列表:" prop="sort">
          <el-input v-model.number="ruleForm.sort" />
        </el-form-item>
        <el-form-item label="是否支持手动新增:" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序属性:" prop="sort">
          <el-input v-model.number="ruleForm.sort" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus';
// import { useRoute } from 'vue-router';
import * as http from '@/request/http';


interface RuleForm {
  parentId?: number;
  id: number;
  name: string;
  title: string;
  icon: string;
  hidden: number;
  sort: number;
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  id: 0,
  name: '',
  title: '',
  icon: '',
  hidden: 0,
  sort: 0,
});

const rules = reactive<FormRules<RuleForm>>({
  title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '前端名称不能为空', trigger: 'blur' }],
});

// 商品属性分类列表
const AttrCategoryList = ref<IAttributeModel[]>([]);

// 发送请求  获取 商品属性分类列表  渲染到页面的商品类型下拉选择器
http.attribute.getAttributeList({
  pageNum: 1,
  pageSize: 100
}).then(res => {
  if (res.code === 200) {
    console.log('商品属性分类', res);
    AttrCategoryList.value = res.data.list;
  }
})

// 点击 提交  进行表单校验
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      alert('验证通过,提交成功!');

    } else {
      alert('验证不通过,无法提交!');
      ElMessage.warning('请先填写表单!');
    }
  })
}
</script>

<style scoped lang="less">
.add-productAttr {
  margin: 20px 238px;

  .center-box {
    padding: 35px 35px 15px;
    margin-top: 10px;
    border: 1px solid #ebeef5;
  }
}
</style>